<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    #include("/cdn/index.html")
    <link rel="stylesheet" type="text/css" href="/static/css/admin/bootstrap.css">
    <link rel="stylesheet" href="/static/css/admin/style.css">
    <link rel="stylesheet" type="text/css" href="/static/css/admin/header.css">
    <script type="text/javascript" src="/static/js/admin/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/admin/bootstrap.js"></script>
    <script type="text/javascript" src="/static/js/admin/open_close.js"></script>
    <script type="text/javascript" src="/static/layui/layer/layer.js"></script>

    <style type="text/css">
        .table thead tr > td:last-child {
            width: 160px;
        }

        .table .btn.btn-xs {
            margin: 0 2px;
        }
    </style>

</head>
<body>
<div id="wrapper">
    #include('left.html')
    <div class="overlay"></div>
    <!-- Page Content -->
    <div id="page-content-wrapper">
        <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
            <span class="hamb-top"></span>
            <span class="hamb-middle"></span>
            <span class="hamb-bottom"></span>
        </button>
        <div class="container">
            <div class="artlist-xcontent">
                <div>
                    <div class="col-lg-12 col-xs-12">
                        <h4><span class="fa fa-hand-o-right"></span> 用户管理</h4>
                        <div style="padding: 13px 5px 0;" class="pull-right">
                            <form @submit.prevent="search" method="post" id="sval">
                                <select v-model="category" class="min-select">
                                    <option :value="0">邮箱</option>
                                    <option :value="1">账号</option>
                                </select>
                                <input class="min-input" type="text" v-model="content" required="required">
                                <button type="submit" style="border-radius: 5px;" class="btn btn-default btn-sm">
                                    搜索
                                </button>
                            </form>
                        </div>
                    </div>
                    <div>
                        <div id="userTable" class="col-lg-12 col-xs-12">
                            <table class="table table-striped">
                                <thead class="bg-color-x">
                                <tr>
                                    <td>账号</td>
                                    <td>邮箱</td>
                                    <td>创建时间</td>
                                    <td>身份</td>
                                    <td>状态</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr is="user-item" v-for="(u, index) in users" :user="u" :audit="audit" :index="index"
                                    :key="u.id"></tr>
                                </tbody>
                                <!-- 分页按钮 -->
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->
    </div>
    <!-- /#wrapper -->
</div>
<template id="user-item">
    <tr>
        <td>{{user.username}}</td>
        <td>{{user.email}}</td>
        <td>{{user.regTime}}</td>
        <td id="role">
            <span v-if="user.role==1" class="label label-primary">学生</span>
            <span v-if="user.role==2" class="label label-primary">老师</span>
            <span v-if="user.role==3" class="label label-primary">管理员</span>
            <span v-if="user.role==4" class="label label-primary">超级管理员</span>
        </td>
        <td>
            <span v-if="user.audit==0" class="label label-warning">未审核</span>
            <span v-if="user.audit==1" class="label label-success">已审核</span>
        </td>
        <td>
            <button @click.prevent="audit(index)" v-if="user.audit==0&&user.role<=3" class="btn btn-xs btn-info">通过审核
            </button>
            <button @click.prevent="audit(index)" v-if="user.audit==1&&user.role<=3" class="btn btn-xs btn-danger">
                驳回审核
            </button>
            <span v-if="user.role>3" class="btn btn-xs btn-info">无需审核</span>
            <!--<button @click.prevent="delete_(index)" v-if="user.role<=3" class="btn btn-xs btn-danger">删除</button>-->
            <!--<span v-if="user.role>3" class="btn btn-xs btn-danger"></span>-->
        </td>
    </tr>
</template>
<script type="text/javascript">
    var usersvm = new Vue({
        el: '#page-content-wrapper',
        data: {
            users: [],
            page: {
                pageNum: 1,
                pagesize: 10,
                totalPages: 1
            },
            category: 0,
            content: '',

        },
        methods: {
            audit: function (index) {
                var self = this;
                var user = self.users[index];
                $.post('/admin/systemuser/audit', {userId: user.id}, function (data) {
                    if (data.success) {
                        user.audit = (user.audit === 0 ? 1 : 0);
                        layer.open({
                            title: '审核状态',
                            content: (user.audit === 0 ? '<h4>驳回审核!</h4>' : '<h4>审核通过!</h4>')
                        });
                    }
                })
            },
            search: function () {  //用户检索
                var self = this;
                $.post('/admin/systemuser/category', {category: self.category, content: self.content}, function (data) {
                        usersvm.users = [];
                    if (data.success) {
                        usersvm.users = data.payload.rows;
                    }else {
                        layer.msg('未找到'+(self.category === 0 ?  '邮箱是 ' : '账号是 ')+self.content+' 的用户！',{icon: 5});
                        $.post('/admin/systemuser/page', function (data) {
                            if (data.success) {
                                usersvm.users = [];
                                usersvm.users = data.payload.rows;
                            }
                        })
                    }
                })
            }

//            删除用户级联删除所有信息

//            delete_: function (index) {
//                var self = this;
//                var user = self.users[index];
//                layer.open({
//                    title: '删除',
//                    btn: ['确认', '取消'],
//                    content: '是否删除账号为 <h4>'+user.username+' 的 '+$('#role span').html() +'</h4> 的全部信息？',
//                    yes: function (i) {
//                        $.post('/admin/systemuser/delete', {userId: user.id}, function (data) {
//                            if (data.success) {
//                                self.$root.users.splice(index,1);
//                            }
//                        });
//                        layer.close(i);
//                    }
//                });
//            }

        },
        created: function () {
            $.post('/admin/systemuser/page', function (data) {
                if (data.success) {
                    usersvm.users = [];
                    usersvm.users = data.payload.rows;
                }
            })
        },
        components: {
            'user-item': {
                props: ['user', 'audit', 'index'],
                template: '#user-item'
            }
        }

    })
</script>
</body>
</html>